<template>
	<view class="friend-container">
		<!-- 自定义头部 -->
		<view class="header-wrap">
			<image src="../../static/left-back.png" mode="heightFix" @click="back()"></image>
			<view class="title">邀好友 得现金</view>
		</view>
		<!-- 主体内容 -->
		<view class="content">
			<view class="hint">好友3547920邀请你使用足球视界</view>
			<view class="code">{{ code }}</view>
			<view class="copy-btn" @click="copy">复制</view>
			<view class="hint-small">下载APP后再注册页面输入</view>
		</view>
		<!-- 说明描述 -->
		<view class="rules-wrap">
			<view>规则说明</view>
			<view>1.下载足球世界注册填写邀请码后充值成功，即可获得×%的返现</view>
			<view>2.同一设备只能使用一次邀请码。</view>
		</view>
		<!-- 底部下载 -->
		<view class="footer">
			<image src="../../static/logo.png" mode="widthFix"></image>
			<view class="info-wrap">
				<view class="name">足球视界</view>
				<view class="info">让体彩变得更简单</view>
			</view>
			<view class="download" @click="download">立即下载</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 邀请码
			code: '3547920'
		};
	},
	methods: {
		// 返回APP
		back() {
			console.log('back');
		},
		// 下载
		download() {
			if (getApp().globalData.isIphone) {
				// 打开苹果Appstore
				window.location.href = 'itms-apps://itunes.apple.com/app/id1564043773?';
				return;
			}
			// 打开下载页面
			var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
			var iframe = document.createElement('iframe');
			iframe.style.display = 'none';
			iframe.src = 'javascript: \'<script>location.href="' + src + '"<\/script>\'';
			document.getElementsByTagName('body')[0].appendChild(iframe);
		},
		// 复制邀请码
		copy() {
			var that = this;
			uni.setClipboardData({
				data: that.code,
				success: function(res) {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				},
				fail: function(res) {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.friend-container {
	height: 100vh;
	width: 100%;
	background: url(../../static/invite-bg.png) no-repeat center top rgba(251, 83, 58, 1);
	background-size: 100% 396rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	// 自定义头部
	.header-wrap {
		display: flex;
		line-height: 120rpx;
		width: 100%;
		align-items: center;
		justify-content: center;
		position: relative;
		image {
			position: absolute;
			left: 0;

			width: 60rpx;
			height: 60rpx;
			z-index: 2;
		}
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	.content {
		margin-top: 301rpx;
		width: 701rpx;
		height: 591rpx;
		background: #ffffff;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 29rpx;
		.hint {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #909090;
			margin-top: 119rpx;
			margin-bottom: 43rpx;
		}
		.code {
			font-size: 58rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #e44336;
			margin-bottom: 51rpx;
		}
		.copy-btn {
			width: 137rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			background: #e44336;
			border-radius: 28rpx;
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 85rpx;
		}
		.hint-small {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #b4b4b4;
		}
	}
	// 规则说明
	.rules-wrap {
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		view {
			margin-bottom: 5rpx;
		}
	}
	// 底部下载
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 125rpx;
		background: rgba(34, 34, 34, 0.49);
		display: flex;
		align-items: center;
		padding: 0 29rpx;
		box-sizing: border-box;
		image {
			width: 85rpx;
			height: 85rpx;
		}
		.info-wrap {
			box-sizing: border-box;
			flex: 1;
			margin-left: 14rpx;
			.name {
				font-size: 40rpx;
				font-family: FZDaBiaoSong-B06;
				font-weight: 400;
				color: #ffffff;
				margin-bottom: 3rpx;
			}
			.info {
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.download {
			width: 162rpx;
			height: 69rpx;
			line-height: 69rpx;
			text-align: center;
			background: #e44336;
			border-radius: 7rpx;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			animation: scale 1.1s;
			animation-iteration-count: infinite;
		}
	}
}
@keyframes scale {
  0% {
      transform: scale(1,1)
  } 
  50% {
      transform: scale(1.05,1.05)
  }
  100% {
      transform: scale(1,1)
  }
}
</style>
